<template>
	<Search @click='changeRouter'></Search>
	<view class="App">
		<scroll-view scroll-y="true" class="scroll_left" :style="{height:height - 50 + 'px'}" :scroll-top="onloadScrollY">
			<view class="left_child" v-for="(item,index) in catgreadData" :key='index' :class="{activite:activeIndex == index}" @click="changeActiveIndex(index)" >{{item.cat_name}}</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="scroll_right" :style="{height:height - 50 + 'px'}" :scroll-top="scrollY">
			<view class="right_child" v-for="(item1,index) in checkListData.children" :key='index' >
				<view class="chatgread2_title">
					/{{item1.cat_name}}/
				</view>
				<view class="chatgread3">
					<view class="chatgread3_child"  v-for="(item2,index) in item1.children" :key='index'>
						<image :src="item2.cat_icon" style="width: 100rpx;height: 100rpx;"></image>
						{{item2.cat_name}}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import easyReq from '../../Tools/EasyReq.js'
	import {
		defineComponent,
		reactive,
		toRefs,
		markRaw,
		computed,
		inject
	} from 'vue'
	import {
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	export default defineComponent({
		setup() {
			const datas = reactive({
				height: 0,
				activeIndex:0,
				catgreadData:[],
				scrollY:0,
				onloadScrollY:0
			})
			const checkListData = computed(()=>datas.catgreadData.length > 0 ? datas.catgreadData[datas.activeIndex] : [])
			async function getCatGread(){
				datas.catgreadData =  await easyReq('/api/public/v1/categories')
			}			
			function changeActiveIndex(index){
				datas.activeIndex = index
				datas.scrollY = datas.scrollY  ? 0 : 1
			}
			function changeRouter(){
				console.log("事件触发")
			}
			onLoad(() => {
				const sysInfo = uni.getSystemInfoSync()
				datas.height = sysInfo.windowHeight
				getCatGread()
			})
			onShow(()=>{
				datas.activeIndex = 0;
				datas.onloadScrollY = datas.onloadScrollY ? 0 : 1
			})
			console.log(inject('app'))
			return{
				...toRefs(datas),checkListData,changeActiveIndex,changeRouter
			}
			
		}
	})
</script>

<style lang="less">
	@constFontSize:12px;
	
	.App {
		width: 100%;
		display: flex;
		.activite{
			background-color: white !important;
			position: relative;
			&::before {
				position: absolute;
				top: 30rpx;
				left: 0;
				content: '';
				display: block;
				background-color: #DD524D;
				width: 7rpx;
				height: 50%;
			}
		}
		.scroll_left {
			width: 25%;
			.left_child {
				color:rgb(0,0,0);
				font-family: "SimHei";
				font-size: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 120rpx;
				background-color: rgb(240,240,240);
			}
		}

		.scroll_right {
			width: 75%;
			.right_child{
				display: flex;
				flex-direction: column;
				.chatgread2_title{
					height: 120rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: "SimHei";
					font-size: @constFontSize;
					font-weight: 600;
				}
				.chatgread3{
					flex: 1;
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					.chatgread3_child{
						font-size: @constFontSize;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						height: 150rpx;
						width: 33.3%;
					}
				}
			}
		}
	}
</style>
